<html>
<head>
    <title>Bootstrap 实例 - 交替的进度条</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
   <style type="text/css">
       #progr_bar_Mask{
           width: 100%;
           height: 100%;
           position: fixed;
           background-color: #F2F2F2;
           top: 0;
           left: 0;
           opacity:0.3;
           filter:alpha(opacity=30);
       }
      #progr_bar{
          width: 60%;
          position: fixed;
          top: 25%;
          left: 25%;
          z-index:2;
      }
   </style>
    <script type="text/javascript">
        $(function() {
                var speedPro=0;
                function speeD(){
                    speedPro+=5;
                    $("#ppp").css("width",speedPro+"%");
                    $("#font").html(speedPro+"%")
                    var id=setTimeout(speeD,30);
                    if(speedPro>100){
                        clearTimeout(id);
                        $("#ppp").css("width","100%");
                        $("#font").html("100%");
                    }
                }
            $("#pri").click(function(){
                speeD();
            });
        })
    </script>
</head>
<body>
<button id="pri" value="点击显示进度条" style="z-index: 2">点击进度条开始</button>
<div class="progress progress-striped active" id="progr_bar">
    <div id="ppp" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="2" aria-valuemax="100" style="width: 10%;min-width: 2em;">
        <span id="font">10%</span>
    </div>
</div>
</body>
</html>

